/*
 * @Author: ellery
 * @Date: 2022-08-20 20:14:35
 * @LastEditTime: 2022-09-05 17:58:40
 * @LastEditors: ellery
 * @Description: 代理和动态路由
 * @FilePath: \vue2-eslint-model\vue.config copy.js
 * Copyright (c) 2022 by ellery, All Rights Reserved.
 * 愿天堂没代码
 */
const { defineConfig } = require("@vue/cli-service");
const os = require("os");
let needHost = "0.0.0.0";
try {
  const network = os.networkInterfaces();
  needHost = network[Object.keys(network)[0]][1].address;
} catch {
  needHost = "localhost";
}
// 动态路由配置
const path = require("path");
const VueAutoRouteWebpackPlugin = require("vue-auto-routes-webpack-plugin");
function resolve(_path) {
  return path.resolve(__dirname, _path);
}
const IS_PROD = process.env.NODE_ENV === "production"; // 是否为生产环境(打包/build后)
// 打包工具begin
// const CompressionPlugin = require("compression-webpack-plugin"); // compression-webpack-plugin插件需要npm安装
// const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
// const VueLoaderPlugin = require("vue-loader/lib/plugin");
// const packageName = require("./package.json").name; // 打包后的文件名
// const BundleAnalyzerPlugin =
//   require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析
// 打包工具end
// 第三方依赖的CDN地址,一下的js有需要的可以npm或者下载引入
const SJCDN = {
  css: [
    // "http://saas123.com/cdnjs/antd.min.css",// ant UI
    "http://saas123.com/cdnjs/mavon-editor.min.css",
    "http://saas123.com/cdnjs/introjs.min.css"
  ],
  js: [
    "http://saas123.com/cdnjs/vue.min.js",
    "http://saas123.com/cdnjs/axios.min.js",
    "http://saas123.com/cdnjs/vuex.min.js",
    "http://saas123.com/cdnjs/vue-router.min.js",
    "http://saas123.com/cdnjs/vue-i18n.min.js",
    "http://saas123.com/cdnjs/moment-with-locales.min.js", // 时间格式js http://momentjs.cn/
    // "http://saas123.com/cdnjs/antd-with-locales.min.js",
    "http://saas123.com/cdnjs/qrcode.min.js", // 二维码js
    "http://saas123.com/cdnjs/mavon-editor.min.js", // 富文本 ,教程:https://blog.csdn.net/scarlett1017/article/details/123687729
    "http://saas123.com/cdnjs/Sortable.min.js", // 拖拽工具 http://www.sortablejs.com/
    "http://saas123.com/cdnjs/intro.min.js", // 操作指南,https://github.com/usablica/intro.js/tags,教程:https://www.cnblogs.com/wisdo/p/4259923.html
    "http://saas123.com/cdnjs/lodash.min.js" // JavaScript 实用工具库,https://www.lodashjs.com/
  ]
};
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: IS_PROD ? "./" : "./", // 公共路径
  outputDir: "dist", // 'dist', 生产环境构建文件的目录
  assetsDir: "static", // 相对于outputDir的静态资源(js、css、img、fonts)目录
  indexPath: "index.html", // 相对于打包路径index.html的路径
  filenameHashing: true, // 文件名中包含了 hash 以便更好的控制缓
  lintOnSave: !IS_PROD, // 设置eslint报错时停止代码编译
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: !IS_PROD, // 不需要生产环境的 source map（减小dist文件大小，加速构建）
  // integrity: true, // 如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性
  pwa: {}, // 向 PWA 插件传递选项。
  parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  devServer: {
    host: needHost, // 匹配本机IP地址(默认是0.0.0.0)
    // host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
    port: 8080, // 开发运行端口号
    open: true, // npm run serve后自动打开页面
    hot: true,
    // 取消头部域名的检测
    historyApiFallback: true,
    allowedHosts: "all",
    client: {
      // 让浏览器 overlay 同时显示警告和错误
      overlay: {
        warnings: true,
        errors: true
      }
    },
    headers: {
      "Access-Control-Allow-Origin": "*"
    },
    proxy: {
      "/api": {
        // 表示拦截以/api开头的请求路径
        target: "http://localhost:8080",
        changOrigin: true, // 是否开启跨域
        ws: true,
        secure: true,
        pathRewrite: {
          "^/api": "" // 重写api，把api变成空字符，因为我们真正请求的路径是没有api的
        }
      }
    }
  },
  chainWebpack(config) {
    // 动态路由配置
    config.plugin("VueAutoRouteWebpackPlugin").use(VueAutoRouteWebpackPlugin, [
      {
        entry: resolve("src/views/"), // 路由页面的入口路径，可以自定义路径
        output: resolve("src/router/routes.js"), // 配置文件输出路径
        rootComponent: "Login", // 根路由下的组件，也就是当路由为/时的页面
        indexComponent: "Index", // 多级路由时，需要为每级路由提供一个入口，用于放置<router-view />承载子路由
        useFileName: true // 是否使用文件名作为路由名称
        // ...// 更多的看文章里介绍
      }
    ]);
    // 第1个参数：别名，第2个参数：路径（设置路径别名）
    config.resolve.alias.set("@", resolve("src"));
    // 生产环境注入cdn
    config.plugin("html").tap((args) => {
      args[0].cdn = SJCDN;
      return args;
    });
    if (IS_PROD) {
      // 移除 prefetch 插件(针对生产环境首屏请求数进行优化)
      config.plugins.delete("prefetch");
      // 移除 preload 插件(针对生产环境首屏请求数进行优化)
      config.plugins.delete("preload");
      // 压缩代码
      config.optimization.minimize(true);
      // 分割代码
      config.optimization.splitChunks({
        chunks: "all"
      });
      // 打包分析, 打包之后自动生成一个名叫report.html文件(可忽视)
      // config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
      //   {
      //     analyzerMode: "static"
      //   }
      // ]);
    }
  },
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: false,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      css: {
        // 启用 CSS modules for all css / pre-processor files.
        modules: {
          auto: () => false
        }
      }
    }
  }
});
